<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }
        #box{
            width: 1000px;
            height: 600px;
            margin: 100px auto;
        }
        div {
            box-sizing: border-box;
        }


        #top {
            width: 1000px;
            height: 100px;
            /*  */
            margin-bottom: 10px;
        }

        #topleft {
            width: 290px;
            height: 100px;
            /*  */
            margin-right: 10px;
            float: left;
            overflow: hidden;
            background-color: red;
        }

        #topright {
            width: 700px;
            height: 100px;
            float: left;
            overflow: hidden;
        }

        #toprighttop {
            width: 140px;
            height: 45px;
            background-color: green;
            float: right;
            /*  */
            margin-bottom: 10px;
            overflow: hidden;
        }

        #toprightbotten {
            width: 700px;
            height: 45px;
            background-color: green;
            float: left;
            overflow: hidden;
        }

        #middle {
            width: 1000px;
            height: 450px;
            /*  */
            margin-bottom: 10px;
        }

        #middleleft {
            width: 340px;
            height: 450px;
            background-color: yellow;
            float: left;
            overflow: hidden;
            margin-right: 10px;
        }

        #middleright {
            width: 650px;
            height: 450px;
            float: left;
            overflow: hidden;
        }

        #middlerighttop {
            width: 650px;
            height: 400px;
            /*  */
            margin-bottom: 10px;
            float: left;
            overflow: hidden;

        }

        #middlerightbotten {
            width: 650px;
            height: 40px;
            float: left;
            overflow: hidden;
            background-color: blue;
        }

        #middlerighttopleft {
            width: 440px;
            height: 400px;
            /*  */
            margin-right: 10px;
            float: left;
            overflow: hidden;
        }

        #middlerighttopright {
            width: 200px;
            height: 400px;
            background-color: purple;
            float: left;
            overflow: hidden;
        }

        #middlerighttoplefttop {
            width: 440px;
            height: 240px;
            /*  */
            margin-bottom: 10px;
            background-color: skyblue;
            float: left;
            overflow: hidden;
        }
        #middlerighttopleftmiddle{
            width: 440px;
            height: 100px;
            /*  */
            margin-bottom: 10px;
            background-color: skyblue;
            float: left;
            overflow: hidden;
        }
        #middlerighttopleftbotten{
            width: 440px;
            height: 40px;
            background-color: skyblue;
            float: left;
            overflow: hidden;
        }
        #botten{
            width: 1000px;
            height: 30px;
            background-color: saddlebrown;
        }

    </style>
</head>

<body>
    <div id="box">
        <div id="top">
            <div id="topleft"></div>
            <div id="topright">
                <div id="toprighttop"></div>
                <div id="toprightbotten"></div>
            </div>
        </div>
        <div id="middle">
            <div id="middleleft"></div>
            <div id="middleright">
                <div id="middlerighttop">
                    <div id="middlerighttopleft">
                        <div id="middlerighttoplefttop"></div>
                        <div id="middlerighttopleftmiddle"></div>
                        <div id="middlerighttopleftbotten"></div>
                    </div>
                    <div id="middlerighttopright"></div>
                </div>
                <div id="middlerightbotten"></div>
            </div>
        </div>
        <div id="botten"></div>
    </div>
</body>

</html>